// 中间大图轮播
$(function(){
     // 设置变量c用来控制图片和li的效果
    var c=0;
    // 用来控制自动轮播的函数
    function run(){
        c++;
        // 判断c的变化条件,当c==6的时候c=0,不=6的时候c还是c三元表达式
        c=(c==6)?0:c;
        //  序号为c的元素淡入，兄弟元素都淡出.c号对应的li变红,兄弟元素变灰
        // alert(c);
        $('.vanclFocus a img').stop().eq(c).fadeIn().parent().siblings('a').find('img').fadeOut();
        $('.vanclFocus ul li').eq(c).css('background','#B61B1F').siblings('li').css('background','#3E3E3E');
    }
    // 设置定时器，每隔1秒钟让图片和li自动轮播
    // 为了避免鼠标在li上面划来划去的时候，图片留白，解决办法就是
    timer=setInterval(run,3000);
    // 给li加鼠标移入事件
    $('.vanclFocus  ul li').hover(function(){
        // 鼠标移入时清理定时器
        clearInterval(timer);
        // this指的是永远是调用它所在函数的对象或者定时器
        // c=$(this).index();
        var jqthis=$(this);
        timer2=setTimeout(function(){
            // 获得li的序号
            // 在这里如果直接使用$(this)的方式选取，在定时器内的条件下选择的是setTimeout这个定时器，而不是li元素
            // 需要注意的是$(this)在不同条件位置情况下指向的对象也是不同的
            c=jqthis.index();
            // 序号为c的元素淡入，兄弟元素都淡出.c号对应的li变红,兄弟元素变灰
        $('.vanclFocus a img').stop().eq(c).fadeIn().parent().siblings('a').find('img').fadeOut();
        $('.vanclFocus ul li').stop().eq(c).css('background','#B61B1F').siblings('li').css('background','#3E3E3E');
        },200)
    },function(){
        clearTimeout(timer2);
    });
        
        //给div加鼠标移入事件
        $('.vanclFocus').mouseenter(function(){
            //清理定时器
            clearInterval(timer);
        })
        
        //给div加鼠标移出事件
        $('.vanclFocus').mouseleave(function(){
            //恢复定时器
            timer = setInterval(run, 3000);
        })

});

//轮播图结束
////原生中间主轮播
//window.onload=function(){
//
//	
//		// 抓元素
//		var pic = document.getElementsByClassName('pic');
//		var vanclFocus = document.getElementById('vanclFocus');
//		var lis = document.getElementsByClassName('lb');
//		// alert(lis);
//		//设置变量，用来控制图片和li的效果
//		// 如果有多个事件都作用在同一块元素上，那么只通过一个变量去控制
//		var c = 0;
//		// 写一个函数，控制图片和li显隐
//		function run(){
//			// 自加，第1号下标图片显示
//			c++;
//			// 判断c的变化条件，当c==6的时候让他切换到第一张图片
//			if(c==7){
//				c=0;
//			}
//			// c=(c==6)?0:c;
//			//循环让所有图片隐藏,所有li的背景颜色都变灰
//			for(var i=0;i<7;i++){
//				pic[i].style.display = "none";
//				lis[i].style.background = "#CCC";
//			}
//			// 让c号对应的图片显示，c号对应的li变红
//			pic[c].style.display = "block";
//			lis[c].style.background = "red";
//			
//
//		}
//		// 设置定时器，每隔一秒变化一次
//		timer=setInterval(run,3000);
//		// 给每个li加鼠标移入事件
//		for(var i=0;i<lis.length;i++){
//			// 把i的值赋给lis[i]下标
//			lis[i].xuhao=i;
//			// 鼠标移入事件
//			lis[i].onmouseover=function(){
//				// 鼠标移入时清理定时器,让图片停止更换，停留在当前图片上
//				clearInterval(timer);
//				// c是控制图片和li的
//				c=this.xuhao;
//				// 遍历数组
//				for(var i=0;i<6;i++){
//					// 让所有图片隐藏,所有li变灰
//					pic[i].style.display = 'none';
//					lis[i].style.background = '#CCC';
//				}
//				// 让c号对应的图片显示，c号对应的li变红
//				pic[c].style.display = 'block';
//				lis[c].style.background = 'red';
//
//			}
//			// 给li加鼠标移出事件
//			lis[i].onmouseout=function(){
//				// 恢复定时器
//				timer=setInterval(run,3000);
//			}
//		}
//	}
//
////轮播图结束

//顶部导航部分
$(function(){
	//给微信加一个鼠标移入事件
	$('#weixin1').mouseenter(function(){
		//兄弟元素显示
		$(this).siblings('#weixin').show();
	});
	
	//给微信加一个鼠标移出事件，移出隐藏
	$('#weixin1').mouseleave(function(){
		//兄弟元素显示
		$(this).siblings('#weixin').hide();
	});
	
	//给购物车加鼠标移入事件
	$('#shoppingcar').mouseenter(function(){
		$(this).find('.shopping').addClass('shopping1').removeClass('shopping');
		//span标签元素显示
		$(this).find('#shopping_h').show();
	});
	
	//给微信加一个鼠标移出事件，移出隐藏
	$('#shoppingcar').mouseleave(function(){
		$(this).find('.shopping1').addClass('shopping').removeClass('shopping1');
		//span标签隐藏
		$(this).find('#shopping_h').hide();
	});
	
	//导航栏
	$('.itempic').mouseenter(function(){
		$(this).find('.tx').show();
	});
	//移出隐藏
	$('.itempic').mouseleave(function(){
		$(this).find('.tx').hide();
	});
	//导航栏结束
	
	//左侧列表隐藏区域
	$('.allProduct').mouseenter(function(){
		$('.sj').css({transform:'rotate(180deg)'});
		$(this).find('.categoryList').show();
	});
	//移出隐藏
	$('.allProduct').mouseleave(function(){
		$('.sj').css({transform:'none'});
		$(this).find('.categoryList').hide();
	});
	//左侧列表隐藏区域结束
});
//顶部导航部分结束
